<template>
  <div class="read-wrapper">
    <div class="go-back" @click="$goPage('/periodicals')">
      {{ $store.state.lang == 'EN' ? 'Back Magazine' : '回到期刊' }}
    </div>
    <div id="reader" class="reader"></div>
    <a id="prev" href="#prev" @click="prevPage()" class="arrow">‹</a>
    <a id="next" href="#next" @click="nextPage()" class="arrow">›</a>
  </div>
</template>
<script>
import Epub from 'epubjs';

export default {
  name: 'Book',
  data() {
    return {
      book: undefined,
    };
  },
  mounted() {
    // console.log(window.innerHeight);
    this.book = new Epub(this.$route.query.link);
    // this.book = new Epub("http://127.0.0.1:5501/666.epub");
    // http://127.0.0.1:5501/666.epub
    // https://cyfket.oss-cn-beijing.aliyuncs.com/epub/20220906171931.epub
    // https://cyfket.oss-cn-beijing.aliyuncs.com/epub/20220914144912.epub
    this.rendition = this.book.renderTo('reader', {
      restore: true,
      width: 2300,
      height: 1600,
      method: 'default',
    });
    this.rendition.display();
    // 全局监听键盘左右键事件
    var _this = this;
    document.onkeyup = function (e) {
      //  console.log(e);
      if (e.code === 'ArrowLeft') {
        //  console.log("arrowleft");
        // pageUp() 和 pageDown()是具体实现的函数
        _this.prevPage();
      } else if (e.code === 'ArrowRight') {
        //  console.log("arrowright");
        _this.nextPage();
      }
    };
  },
  methods: {
    prevPage() {
      if (this.rendition) {
        this.rendition.prev();
      }
    },
    nextPage() {
      if (this.rendition) {
        this.rendition.next();
      }
    },
  },
};
</script>
<style lang="scss">
.go-back {
  position: fixed;
  left: 30px;
  top: 30px;
  background-color: $zh;
  padding: 8px 30px;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}

#reader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -47%) scale(0.65);

  .calibre1 {
    margin: 0 !important;
  }
}

#prev {
  position: fixed;
  left: 30px;
  width: 50px;
  height: 50px;
  line-height: 44px;
  top: 50%;
  font-size: 50px;
  background-color: rgba(245, 245, 245, 0.521);
  border-radius: 50%;
  text-align: center;
}

#next {
  position: fixed;
  right: 30px;
  width: 50px;
  height: 50px;
  line-height: 44px;
  top: 50%;
  font-size: 50px;
  background-color: #f5f5f5;
  border-radius: 50%;
  text-align: center;
}
</style>
